import React from "react";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";

// import Pagination from '@material-ui/lab/Pagination';
import Pagination from "../components/Pagination";
import { Link, useHistory } from "react-router-dom";
import FormDialog from "../components/FormDialog";
// import breadcrumbsDispatch from "../stores/breadcrumbsDispatch"
import {useBreadcrumbsContext} from "../contexts/BreadcrumbsContext"

import service from "../service";
import useService from "../service/useService";
import moment from "moment";

const useStyles = makeStyles((theme) => ({
	root: {
		"& > *": {
			margin: theme.spacing(1),
			width: "25ch",
		},
	},
	container: {
		margin: theme.spacing(2, 4),
		// padding: theme.spacing(0),
	},
	table: {
		minWidth: 650,
	},
	pagination: {
		margin: theme.spacing(2, 0),
		// padding:theme.spacing(4,"auto"),
	},
	btn: {
		width: 100,
	},
}));

const fields = [
	{ name: "name", label: "名称", xs: 6 },
	{ name: "mapCountry", label: "地图中心", type: "select", options: [{ value: "cn", label: "中国" }] },
	{ name: "bidDate", label: "招标日期", type: "date" },
	{ name: "completionDate", label: "竣工日期", type: "date" },
	{ name: "manager", label: "负责人", type: "text" },
	{ name: "managerPhone", label: "负责人电话", type: "text" },
	{ name: "projectAddr", label: "项目地址", type: "text" },
	{ name: "projectType", label: "项目类型", type: "select", options: [{ value: 1, label: "类型1" }] },
	{ name: "staffNum", label: "人员规模", type: "number" },
	{ name: "remark", label: "备注" },
];




export default function ProjectList(props) {
	const classes = useStyles();
	const [page, setPage] = React.useState(1);
	const {setBreadcrumbs , breadcrumbs} =useBreadcrumbsContext()
	// React.useEffect(() => {
	// 	(async () => {
	useService(async (service)=> {
		var r = await service.projects.list();
		if (r.State == 0) {
			setPage(r.Data);
		}
		setBreadcrumbs([{title:"项目"}])
	})
	async function handleNewProject(data) {
		// useService(async(service)=>{
		var cr = await service.projects.create(data);
		var r = await service.projects.list();
		if (r.State == 0) {
			setPage(r.Data);
		}

		return cr
		// })
	}
	// 	})();
	// }, []);

	const [newProjectDialog, setNewProjectDialog] = React.useState(false);

	return (
		<>
			<form className={classes.root} noValidate autoComplete="off">
				<TextField id="standard-name" label="名称" name="name" />
				<Button variant="contained" color="primary" type="button" className={classes.btn}>
					查询
				</Button>
				<Button
					variant="contained"
					color="primary"
					type="button"
					className={classes.btn}
					onClick={() => {
						setNewProjectDialog(true);
					}}
				>
					新建项目
				</Button>
			</form>
			<TableContainer component={Paper}>
				<Table className={classes.table} aria-label="simple table">
					<TableHead>
						<TableRow>
							<TableCell>序号</TableCell>
							<TableCell align="right">名称</TableCell>
							<TableCell align="right">招标日期</TableCell>
							<TableCell align="right">状态</TableCell>
							<TableCell align="right">负责人</TableCell>
							<TableCell align="right">编辑图纸</TableCell>
						</TableRow>
					</TableHead>
					<TableBody>
						{page.Items &&
							page.Items.map((row, i) => (
								<TableRow key={row.Id}>
									<TableCell component="th" scope="row">
										{i + 1 + page.PageIndex * page.PageSize}
									</TableCell>
									<TableCell align="right">
										<Link to={"/project/" + row.Id}>{row.Name}</Link>
									</TableCell>
									<TableCell align="right">{row.BidDate && moment(row.BidDate).format("Y-M-D")}</TableCell>
									<TableCell align="right">{row.State}</TableCell>
									<TableCell align="right">{row.Manager}</TableCell>
									<TableCell align="right">
										<a target="_blank" href={"/graph/" + row.GraphId}>
											编辑
										</a>
									</TableCell>
								</TableRow>
							))}
					</TableBody>
				</Table>
			</TableContainer>
			<Grid container className={classes.pagination}>
				<Pagination
					color="primary"
					url="/project"
					count={page.PageCount}
					onPage={(p) => {
						console.log("onPage", p);
					}}
				></Pagination>
			</Grid>
			<FormDialog open={newProjectDialog} setOpen={setNewProjectDialog} fields={fields} handleSubmit={handleNewProject}></FormDialog>
		</>
	);
}
